<template>
    <!--地图挂载dom-->
    <div id="map">
    </div>

</template>

<script>
    //引入依赖
    import {Map, View} from 'ol'
    import TileLayer from 'ol/layer/Tile';
    import {XYZ} from 'ol/source';
    import {WindLayer} from 'ol-wind';
    import * as axios from 'axios';

    export default {
        name: 'ProjectWindLayer',
        props: {
            msg: String
        },
        data(){
            return{
                data:null
            }
        },
        mounted() {

            this.$nextTick(() => {
                //初始化地图
                let map = new Map({
                    target: 'map',//指定挂载dom，注意必须是id
                    layers: [
                        new TileLayer({
                            source: new XYZ({
                                url: 'http://cache1.arcgisonline.cn/arcgis/rest/services/ChinaOnline' +
                                'StreetPurplishBlue/MapServer/tile/{z}/{y}/{x}'
                            })
                        })
                    ],
                    //配置视图
                    view: new View({
                        center: [113.24981689453125, 26.126468438108688],   //视图中心位置
                        projection: "EPSG:4326", //指定投影
                        zoom: 4   //缩放到的级别
                    })
                });
                this.initWind(map);
            })
        },
        methods: {
            initWind(map) {
                // 为给定 ID 的 user 创建请求
                axios.get('http://localhost:8888/openlayer/wind/wind.json')
                    .then((response) => {
                        console.log(response);
                        let data = response.data;
                        //将全球风向数据构建成一个windlayer
                        const windLayer = new WindLayer(data, {
                            windOptions: {
                                colorScale: [//缩放不同级别的例子颜色
                                    "rgb(36,104, 180)",
                                    "rgb(60,157, 194)",
                                    "rgb(128,205,193 )",
                                    "rgb(151,218,168 )",
                                    "rgb(198,231,181)",
                                    "rgb(238,247,217)",
                                    "rgb(255,238,159)",
                                    "rgb(252,217,125)",
                                    "rgb(255,182,100)",
                                    "rgb(252,150,75)",
                                    "rgb(250,112,52)",
                                    "rgb(245,64,32)",
                                    "rgb(237,45,28)",
                                    "rgb(220,24,32)",
                                    "rgb(180,0,35)"
                                ],
                                lineWidth: 2,//线宽
                                frameRate: 16,//帧率
                                globalAlpha: 0.6,//全局的透明度，对全球风向的粒子拖尾效果
                                velocityScale: 1 / 50,//速度级别
                                paths: () => { // can be number or function //生成粒子数的数量，生成粒子数量回调函数
                                    const zoom = map.getView().getZoom();
                                    return zoom * 200;
                                },
                            },
                        });
                        console.log(map, windLayer);
                        map.addLayer(windLayer);
                    })
                    .catch((error) => {
                        console.log(error);
                    });
                // fetch('http://localhost:8888/openlayer//wind/wind.json')
                //     .then(res => res.json())
                //     .then(res => {
                //         const windLayer = new WindLayer(res, {
                //             windOptions: {
                //                 colorScale: [
                //                     "rgb(36,104, 180)",
                //                     "rgb(60,157, 194)",
                //                     "rgb(128,205,193 )",
                //                     "rgb(151,218,168 )",
                //                     "rgb(198,231,181)",
                //                     "rgb(238,247,217)",
                //                     "rgb(255,238,159)",
                //                     "rgb(252,217,125)",
                //                     "rgb(255,182,100)",
                //                     "rgb(252,150,75)",
                //                     "rgb(250,112,52)",
                //                     "rgb(245,64,32)",
                //                     "rgb(237,45,28)",
                //                     "rgb(220,24,32)",
                //                     "rgb(180,0,35)"
                //                 ],
                //                 lineWidth: 2,
                //                 frameRate: 16,
                //                 globalAlpha: 0.6,
                //                 velocityScale: 1 / 50,
                //                 generateParticleOption: false,
                //                 //generateParticleOption: true,
                //                 paths: () => { // can be number or function
                //                     const zoom = map.getView().getZoom();
                //                     return zoom * 1000;
                //                 },
                //             },
                //         });
                //
                //         console.log(map, windLayer);
                //
                //         map.addLayer(windLayer);
                //     });
            }
        }
    }
</script>

<style scoped>
    #map {
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: row;
    }
</style>
